<template>
    <view :style="{ '--color': color }">
        <status-bar title="预约详情"></status-bar>

        <view class="bom" v-if="pageData">
            <image :src="$imgUrls(pageData.v_user_info.v_headimg)" mode="aspectFill" class="headImg" v-if="pageData.v_headimg"></image>
            <view class="content">
                <text class="black size28 bold500 ellipsis">{{ pageData.v_user_info.v_name }}</text>
                <text class="color_66 size24 ellipsis">{{ pageData.v_user_info.v_tel }}</text>
            </view>
            <view class="contact" @click="$common.Tel(pageData.v_user_info.v_tel)">联系TA</view>
        </view>

        <view class="ServiceTime" v-if="pageData.state >= 4">
            <text class="black size30 bold500">服务记时</text>
            <text class="color_33 size46">{{ second }}</text>
        </view>

        <view class="serverBox" v-if="pageData.state >= 2">
            <text class="color_66 size30 text-center" v-if="pageData.payment > 0">{{ pageData.feeTip }}</text>
            <view class="Price" :class="{ eidtPrice: pageData.changePriceShow == 1 }" v-if="pageData.payment > 0" @click="EditPrice">
                <text class="size28 m-top26 m-right4">￥</text>
                <text class="size64">{{ pageData.payment }}</text>
            </view>
            <text class="black size26 m-top20" v-if="pageData.sign_desc">{{ pageData.sign_desc }}</text>
            <view class="drawBox" v-if="pageData.sign_pic">
                <block v-for="(item, index) in pageData.sign_pic" :key="index">
                    <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.sign_pic)" class="drawImg"></image>
                </block>
            </view>
        </view>

        <view class="Wrapper" v-if="pageData.master_info">
            <text class="black size30">师傅信息</text>
            <view class="d-flex a-center m-top20">
                <image :src="$imgUrls(pageData.master_info.master_head)" mode="aspectFill" class="master_head"></image>
                <view class="masterInfo">
                    <text class="black size30" user-select>{{ pageData.master_info.master_name }}</text>
                    <text class="black size30" user-select>{{ pageData.master_info.master_tel }}</text>
                </view>
                <view class="contact" @click="$common.Tel(pageData.master_info.master_tel)">联系TA</view>
            </view>
        </view>

        <view class="Wrapper">
            <view class="applist a-center">
                <text class="title">预约类型</text>
                <text class="content" user-select>{{ pageData.typeName }}</text>
                <view class="repairTypeName">{{ pageData.repairTypeName }}</view>
            </view>
            <view class="applist">
                <text class="title">预约项目</text>
                <text class="content" user-select>{{ pageData.goods_name }}</text>
            </view>
            <view class="applist a-center" @click="editTime">
                <text class="title">预约时间</text>
                <text class="content" user-select>{{ pageData.service_time }}</text>
                <view class="iconfont icon-a-zu1306 color size40" v-if="hasAccept"></view>
            </view>
            <view class="applist">
                <text class="title">联系人</text>
                <text class="content" user-select>{{ pageData.name }}</text>
            </view>
            <view class="applist">
                <text class="title">联系电话</text>
                <text class="content" user-select @click.stop="$common.Tel(pageData.tel)">{{ pageData.tel }}</text>
            </view>
            <view class="applist">
                <text class="title">服务地址</text>
                <text class="content" user-select>{{ pageData.address }}</text>
            </view>
            <view class="applist">
                <text class="title">备注信息</text>
                <text class="content" user-select>{{ pageData.remark }}</text>
            </view>
            <view class="applist" v-if="pageData.confirm_code">
                <text class="title">确认码</text>
                <text class="content" user-select>{{ pageData.confirm_code }}</text>
            </view>
            <view class="drawing">
                <text class="color_33 size28">现场图</text>
                <view class="drawBox">
                    <block v-for="(item, index) in pageData.attachment" :key="index">
                        <image :src="$imgUrls(item)" mode="aspectFill" @click="$common.previewImgs(index, pageData.attachment)" class="drawImg"></image>
                    </block>
                </view>
            </view>
        </view>

        <view class="Options" v-for="(item, index) in pageData.options" :key="index" v-if="item.key != 'master_id'">
            <text class="black size28">{{ item.name }}</text>
            <view class="KeyBox">
                <view class="list" :class="{ Active: sub.selected == 1 }" @click="changeKey(index, sin)" v-for="(sub, sin) in item.value" :key="sin">{{ sub.text }}</view>
            </view>
        </view>

        <view class="Remarks" v-if="hasAccept || pageData.receive_remark">
            <text class="black size28">备注</text>
            <textarea class="receive_remark" :disabled="!hasAccept" placeholder="请输入备注" v-model="pageData.receive_remark"></textarea>
        </view>

        <block v-if="hasAccept">
            <u-sticky :customNavHeight="totalHeight">
                <view class="selectMastBox" @click="screenVisible = true">
                    <text class="black size30">选择服务人员</text>
                    <view class="iconfont icon-a-lujing2835 color size36"></view>
                </view>
            </u-sticky>

            <view class="maslit" v-for="(item, index) in MasterData" :key="item.master_id" @click="master_id = item.master_id">
                <image :src="$imgUrls(item.master_head)" v-if="item.master_head" mode="aspectFill" class="master_head"></image>
                <view class="content">
                    <view class="d-flex a-center">
                        <text class="black size28">{{ item.master_name }}</text>
                        <text class="color_99 size24 m-left20">{{ item.master_tel }}</text>
                    </view>
                    <view class="d-flex f-wrap">
                        <view class="licate" v-for="(sub, sin) in item.master_cate">{{ sub }}</view>
                    </view>
                </view>
                <view class="checkbox" :class="{ Active: item.master_id == master_id }">
                    <view class="iconfont icon-xuanzhong white size24"></view>
                </view>
            </view>

            <emptys v-if="!MasterData.length"></emptys>
        </block>

        <view class="footer" v-if="isFooterVisible">
            <view class="Box" v-if="pageData.staff_button.length == 1">
                <view class="BoxPrice" @click="recheck = true">复核价格</view>
            </view>
            <view class="Box" v-if="pageData.staff_button.length == 2">
                <block v-for="(item, index) in pageData.staff_button" :key="index">
                    <view class="list" @click="Operation(item)" :class="item.main_color == 1 ? 'Config' : 'Cancel'">{{ item.text }}</view>
                </block>
            </view>
            <view class="Box" v-if="pageData.staff_button.length == 3">
                <block v-for="(item, index) in pageData.staff_button" :key="index">
                    <view class="list" @click="Operation(item)" :class="item.main_color == 1 ? 'Config' : 'Cancel'">{{ item.text }}</view>
                </block>
            </view>
        </view>

        <u-popup :show="show" @close="show = false" round="10" closeable>
            <view class="contentBox">
                <text class="black size32 bold500">拒绝原因</text>
                <textarea v-model="reason" auto-height placeholder="请输入拒绝原因" class="reason" />
                <view class="popupBox">
                    <view class="list Cancel" @click="show = false">取消</view>
                    <view class="list Config" @click="Turndown">提交</view>
                </view>
            </view>
        </u-popup>

        <u-picker :show="isMasterVisible" @cancel="isMasterVisible = false" @confirm="masterConfirm" :columns="MasterData"></u-picker>
        <u-datetime-picker @cancel="TimeVisible = false" :minDate="minDate" @confirm="serverTimeConfirm" :show="TimeVisible" v-model="pageData.service_time_stamp" mode="date"></u-datetime-picker>

        <u-popup :show="recheck" @close="recheck = false" round="10" closeable>
            <view class="recheckBox">
                <view class="rechEn">
                    <text class="black size32 bold500 text-center">服务价格</text>
                    <input type="digit" class="digitInput" v-model="payment" placeholder="请输入服务价格" />
                    <input type="digit" class="digitInput" v-model="distribution" placeholder="请输入分销金额" />
                </view>
                <view class="popupBox">
                    <view class="list Cancel" @click="recheck = false">取消</view>
                    <view class="list Config" @click="RecheckDown">复核价格</view>
                </view>
            </view>
        </u-popup>

        <u-popup :show="screenVisible" @close="screenVisible = false" mode="right">
            <view class="screenBox" :style="{ 'padding-top': totalHeight + 'px' }" v-if="pageData">
                <view class="screenContent">
                    <view class="list" v-for="(item, index) in pageData.master_cate" :key="item.id">
                        <text class="name">{{ item.name }}</text>
                        <view class="cateBox">
                            <view class="catelist" :class="{ Active: item.cateId == sub.id }" v-for="(sub, sin) in item.subset" :key="sub.id" @click="editCateId(index, sub.id)">{{ sub.name }}</view>
                        </view>
                    </view>
                    <emptys v-if="!pageData.master_cate.length"></emptys>
                </view>
                <view class="screen_Bot" v-if="pageData.master_cate && pageData.master_cate.length">
                    <view class="li Reset" @click="Reset">重置</view>
                    <view class="li Config" @click="getMaster">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<!-- repair_type  0未定义 1正常单 2 月结单  3定额单 4返修单-->
<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    import MannerOrder from '@/zunyi/Api/index.js';
    export default {
        data() {
            return {
                timer: null,
                show: false, //拒绝
                recheck: false, //核价格
                id: '',
                pageData: '',
                reason: '',
                sign_desc: '',

                payment: '',
                distribution: '',
                confirm_code: '', //确认码

                showServer: false,
                is_staff: 1,
                screenVisible: false, // 筛选师傅
                isSendorderVisible: false, // 派单
                isMasterVisible: false,
                columns: [['1', '2']],
                tel: '',

                goods_id: '',
                TimeVisible: false,
                minDate: Number(new Date()),
                address: '',
                MasterData: [],
                master_id: ''
            };
        },
        onLoad(opt) {
            if (opt.id) this.id = opt.id;
        },
        onShow() {
            this.init();
        },

        methods: {
            async Operation(Item) {
                // 接单
                if (Item.action == 'receive') {
                    const hasConfirmed = await this.$Modals('提示', '是否确定接单?');
                    if (!hasConfirmed) return;
                    const response = await MannerOrder.Post_receive(this.id);
                    this.init();
                }
                // 拒绝订单(驳回)
                if (Item.action == 'reject') return (this.show = true);
                // 派单
                if (Item.action == 'accept' && !this.master_id) return this.$Toast('未选择服务人员');
                if (Item.action == 'accept' && this.master_id) {
                    const Result = this.MasterData.find((N) => N.master_id == this.master_id);
                    const isConfirmed = await this.$Modals('提示', `是否确定派单给:${Result.master_name}`);
                    if (!isConfirmed) return;
                    this.SeedOrder();
                }
            },

            // 拒绝订单(驳回)
            async Turndown() {
                if (!this.reason) return this.$Toast('拒绝理由不能为空');
                const response = await MannerOrder.Post_reject(this.id, this.reason);
                this.show = false;
                this.init();
            },

            // 派单
            async SeedOrder() {
                const requestData = {
                    master_id: this.master_id,
                    service_time: this.pageData.service_time,
                    repair_id: this.id,
                    receive_remark: this.pageData.receive_remark
                };
                this.pageData.options.forEach((item) => {
                    if (item.key != 'master_id') {
                        item.value.forEach((n) => {
                            if (n.selected == 1) {
                                requestData[item.key] = n.value;
                            }
                        });
                    }
                });

                const response = await MannerOrder.Post_accept(requestData);
                const result = await this.$Modals('提示', '派单成功');

                this.init();
            },

            masterConfirm(e) {
                const response = e.value[0];

                this.MasterData[0].forEach((item) => {
                    if (item.value == response.value) {
                        item.selected = 1;
                    } else {
                        item.selected = 0;
                    }
                });
                this.isMasterVisible = false;
            },

            serverTimeConfirm(e) {
                this.pageData.service_time_stamp = e.value;
                const formatservice_time = this.formatservice_time(e.value);
                this.pageData.service_time = formatservice_time;
                this.TimeVisible = false;
            },

            async RecheckDown() {
                if (!this.payment) return this.$Toast('请输入服务价格');
                if (!this.distribution) return this.$Toast('请输入分销金额');
                this.recheck = false;
                const requestData = {
                    payment: this.payment,
                    distribution: this.distribution,
                    repair_id: this.id
                };
                const response = await MannerOrder.Post_changePayment(requestData);
                this.init();
            },

            async StartServer() {
                const result = await this.$Modals('提示', '是否确定开始服务?');
                if (!result) return;
                const requestResult = await Api.postStartOrder(this.id);
                this.init();
            },

            EditPrice() {
                if (this.pageData.changePriceShow != 1) return;
                this.payment = this.pageData.payment;
                this.recheck = true;
            },

            async init() {
                let requestObj = {
                    repair_id: this.id,
                    is_staff: this.is_staff
                };
                const result = await Api.repairOrderDetail(requestObj);
                if (result.service_time_stamp) result.service_time_stamp = Number(result.service_time_stamp);
                this.address = result.address;
                if (result.master_cate && result.master_cate.length) {
                    result.master_cate.forEach((n) => {
                        n.cateId = 0;
                        if (n.subset && n.subset.length) {
                            n.subset.forEach((s) => {
                                s.checkbox = false;
                            });
                        }
                    });
                }

                this.pageData = result;

                this.getMaster();
            },

            editCateId(Index, Id) {
                this.pageData.master_cate[Index].cateId = Id;
            },

            chooseLocation() {
                uni.chooseLocation({
                    success: (res) => {
                        this.address = res.address;

                        console.log(res);
                    },
                    complete: (com) => {
                        // console.log(com);
                    }
                });
            },

            Reset() {
                this.master_id = '';
                this.pageData.master_cate.forEach((N) => {
                    N.cateId = 0;
                });
            },

            changeKey(index, sin) {
                if (!this.hasAccept) return;
                this.pageData.options[index].value.forEach((n, i) => {
                    if (i == sin) {
                        n.selected = 1;
                    } else {
                        n.selected = 0;
                    }
                });
            },

            async getMaster() {
                const cate_ids = [];
                this.pageData.master_cate.forEach((N) => {
                    if (N.cateId) cate_ids.push(N.cateId);
                });
                const response = await MannerOrder.Get_getMaster(cate_ids.join(','));
                this.master_id = '';
                this.MasterData = response;
                this.screenVisible = false;
            },

            editTime() {
                if (!this.hasAccept) return;
                this.TimeVisible = true;
            },
            formatservice_time() {
                const date = new Date(this.pageData.service_time_stamp);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                return `${year}-${month}-${day}`;
                // return `${year}-${month}-${day} ${hours}:${minutes}:00`;
            },

            formatSeconds(seconds) {
                // 计算天数、小时、分钟和秒
                const days = Math.floor(seconds / (24 * 60 * 60)); // 总秒数除以一天的秒数
                const remainingSecondsAfterDays = seconds % (24 * 60 * 60); // 剩余的秒数
                const hours = Math.floor(remainingSecondsAfterDays / (60 * 60)); // 剩余秒数除以一小时的秒数
                const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60); // 剩余的秒数
                const minutes = Math.floor(remainingSecondsAfterHours / 60); // 剩余秒数除以一分钟的秒数
                const remainingSeconds = remainingSecondsAfterHours % 60; // 最终剩余的秒数

                // 格式化时间
                const formattedTime = [
                    hours.toString().padStart(2, '0'), // 小时
                    minutes.toString().padStart(2, '0'), // 分钟
                    remainingSeconds.toString().padStart(2, '0') // 秒
                ].join(':');

                // 如果有天数，则加上天数
                if (days > 0) {
                    return `${days}天${formattedTime}`;
                }

                // 否则只返回小时、分钟和秒
                return formattedTime;
            }
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            second() {
                if (!this.pageData) return '';
                if (this.pageData.state == 4) {
                    this.time = setTimeout(() => {
                        this.pageData.start_second++;
                    }, 1000);
                    return this.formatSeconds(this.pageData.start_second);
                } else if (this.pageData.state > 4) {
                    return this.formatSeconds(this.pageData.start_second);
                }
            },
            isFooterVisible() {
                if (this.pageData.staff_button && this.pageData.staff_button.length) return true;
                return false;
            },
            hasAccept() {
                if (!this.pageData.staff_button) return;
                const hasAccept = this.pageData.staff_button.some((N) => N.action == 'accept');
                return hasAccept;
            }
        },
        beforeDestroy() {
            clearTimeout(this.timer);
            // clearInterval(this.timer);
        },
        onHide() {
            clearTimeout(this.timer);
        },
        onUnload() {
            clearTimeout(this.timer);
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
    }
</style>
<style lang="scss" scoped>
    .screenBox {
        width: 600rpx;
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding-left: 24rpx;
        padding-right: 24rpx;
        padding-bottom: 40rpx;
        box-sizing: border-box;
        .screenContent {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
            .list {
                display: flex;
                flex-direction: column;
                margin-bottom: 36rpx;
                .name {
                    color: #000;
                    font-size: 28rpx;
                }
                .cateBox {
                    width: 100%;
                    margin-top: 20rpx;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    row-gap: 24rpx;
                    column-gap: 20rpx;

                    .catelist {
                        background-color: #f9f9f9;
                        min-height: 60rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10rpx;
                        font-size: 24rpx;
                        color: #363636;
                        border-radius: 6rpx;
                        overflow: hidden;
                        border: 1px solid #f9f9f9;
                    }
                    .Active {
                        color: var(--color);
                        background-color: rgba(40, 173, 242, 0.1);
                        border: 1px solid var(--color);
                    }
                }
            }
        }
        .screen_Bot {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 30rpx;
            .li {
                width: 250rpx;
                height: 76rpx;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
            }
            .Reset {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
    .VisibleBox {
        width: 100%;
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            color: #000;
            font-size: 36rpx;
            font-weight: 500;
        }
        .list {
            width: 100%;
            padding: 30rpx 0;
            border-bottom: 1px solid #f1f1f1;
            display: flex;
            .title {
                width: 140rpx;
                color: #999;
                font-size: 28rpx;
                text-align: justify;
                text-align-last: justify;
                padding-right: 24rpx;
            }
            .content {
                flex: 1;
                font-size: 28rpx;
                padding-right: 20rpx;
            }
        }
    }
    .ServiceTime {
        width: 700rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popupBox {
        width: 100%;
        height: 124rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 40rpx;
        .list {
            width: 300rpx;
            height: 96rpx;
            border-radius: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32rpx;
        }
        .Cancel {
            background-color: #eaeaea;
            color: #666666;
        }
        .Config {
            background-color: var(--color);
            color: #fff;
        }
    }
    .contentBox {
        width: 100%;
        padding: 40rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .reason {
            width: 100%;
            min-height: 240rpx;
            background-color: #f2f2f2;
            padding: 20rpx;
            border-radius: 10rpx;
            font-size: 28rpx;
            margin-top: 40rpx;
        }
    }
    .serverBox {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx 24rpx 40rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .Price {
            color: #ff3355;
            margin-top: 10rpx;
        }
        .eidtPrice {
            border-bottom: 1px solid #f2f2f2;
        }
        .playBtn {
            width: 260rpx;
            height: 80rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 28rpx;
            border-radius: 40rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40rpx;
        }
    }

    .bom {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        align-items: center;
        .headImg {
            width: 96rpx;
            height: 96rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 96rpx;
            margin-right: 10rpx;
        }
        .contact {
            background-color: var(--color);
            color: #fff;
            font-size: 24rpx;
            width: 146rpx;
            height: 60rpx;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .selectMastBox {
        width: 100%;
        height: 100rpx;
        padding: 0 25rpx;
        margin: 24rpx auto 0;
        background-color: $bgF8;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .maslit {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        align-items: center;
        .master_head {
            width: 100rpx;
            height: 100rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            .licate {
                padding: 2rpx 8rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 20rpx;
                margin-right: 10rpx;
                margin-top: 10rpx;
                border-radius: 6rpx;
            }
            .licate:last-child {
                margin-right: 0;
            }
        }
        .checkbox {
            width: 40rpx;
            height: 40rpx;
            border: 1px solid #ccc;
            border-radius: 6rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .Active {
            background-color: var(--color);
            border: 1px solid var(--color);
        }
    }
    .Remarks {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        flex-direction: column;
        .receive_remark {
            width: 100%;
            background-color: #f1f1f1;
            min-height: 200rpx;
            padding: 20rpx;
            border-radius: 6rpx;
            font-size: 28rpx;
            color: #000;
            margin-top: 20rpx;
        }
    }
    .Options {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        display: flex;
        flex-direction: column;
        .KeyBox {
            width: 100%;
            display: flex;
            .list {
                flex: 1;
                min-height: 70rpx;
                padding: 10rpx;
                border: 1px solid #f9f9f9;
                background-color: #f9f9f9;
                color: #363636;
                font-size: 26rpx;
                margin-right: 20rpx;
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6rpx;
            }
            .list:last-child {
                margin-right: 0;
            }
            .Active {
                color: var(--color);
                background-color: rgba(40, 173, 242, 0.1);
                border: 1px solid var(--color);
            }
        }
    }
    .Wrapper {
        width: 700rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        .applist {
            width: 100%;
            display: flex;
            margin-bottom: 40rpx;
            .title {
                width: 140rpx;
                color: #333;
                font-size: 28rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
            }
            .content {
                flex: 1;
                color: #333;
                font-size: 28rpx;
            }
            .repairTypeName {
                padding: 4rpx 10rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
                margin-left: 12rpx;
                background-color: #fff7ed;
                color: #ffa641;
            }
        }
        .drawing {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .master_head {
            width: 120rpx;
            height: 120rpx;
            border-radius: 10rpx;
            margin-right: 30rpx;
        }
        .masterInfo {
            flex: 1;
            height: 120rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .contact {
            background-color: var(--color);
            color: #fff;
            font-size: 24rpx;
            width: 146rpx;
            height: 60rpx;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .upopup {
        width: 100%;
        padding: 50rpx 30rpx 30rpx 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .wechat {
            width: 360rpx;
            height: 360rpx;
            margin-top: 30rpx;
        }
    }
    .drawBox {
        width: 100%;
        margin-top: 20rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10rpx;
        .drawImg {
            width: 200rpx;
            height: 200rpx;
            border-radius: 12rpx;
            border: 1px solid #eaeaea;
        }
    }
    .recheckBox {
        width: 100%;
        padding: 50rpx 40rpx;
        display: flex;
        flex-direction: column;
        .rechEn {
            display: flex;
            flex-direction: column;
        }
        .digitInput {
            width: 100%;
            height: 88rpx;
            background-color: #f2f2f2;
            font-size: 28rpx;
            color: #000;
            padding: 0 24rpx;
            margin-top: 60rpx;
            border-radius: 10rpx;
        }
    }

    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .Box {
            width: 100%;
            height: 124rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .list {
                width: 340rpx;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
            .lists {
                width: 220rpx;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
            .Cancel {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
            .BoxPrice {
                width: 90%;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                background-color: var(--color);
                color: #fff;
            }
        }
    }
    .Open {
        right: 0;
    }
    .Close {
        right: -140rpx;
    }
    .place {
        color: #666;
        font-size: 28rpx;
    }
</style>
